<?php
/**
 * Created by PhpStorm.
 * User: l
 * Date: 2016/8/31
 * Time: 17:47
 */
use app\assets\AppAsset;
use yii\helpers\Html;

$base = Yii::$app->request->baseUrl;
AppAsset::register($this);
AppAsset::addCss($this, $base . '/app/css/login.css');
AppAsset::addScript($this,Yii::$app->request->baseUrl . '/js/InputNumber.js');

$this->title = '热城APP管理系统';
?>

<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>

<body>
<?php $this->beginBody() ?>

<div id="mianId" class="wholeBgDiv"
     style="background: no-repeat;background: #FFFFFF;background-size: 100% 100%">

    <div style="width:54.1rem;height: 11.4rem;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);">
        <div style="height: 1rem">
            <div class="loginRows">

                <input name="login_phone" type="tel" placeholder="请输入手机号码" onKeyPress="return inputNum(event);"
                       style="background:url(<?= $base ?>/app/images/login/app_login_phone.png) no-repeat 1rem center;"/>
            </div>

            <div id="phone_error" class="errorDiv">提示:用户名不能为空</div>

            <div style="clear: both"></div>
        </div>

        <div style="height: 1rem">
            <div class="loginRows">
                <input
                    name="login_password" type="password" placeholder="请输入6位以上密码"
                    style="background:url(<?= $base ?>/app/images/login/app_login_password.png) no-repeat 1rem center;"/>
            </div>

            <div id="password_error" class="errorDiv">提示:密码不能为空</div>

            <div style="clear: both"></div>
        </div>

        <button class="loginBtn" onclick="login()">登录</button>
    </div>

</div>

<?php $this->endBody() ?>
</body>

</html>
<?php $this->endPage() ?>

<script>
    var commonMsg = "提示：";

    function login() {
        var login_phone = $("input[name=login_phone]").val();
        var login_password = $('input[name=login_password]').val();

        var errorMsg = "";
        var flag = true;

        if(!login_phone){
            errorMsg = "手机号不能为空";
            $('#phone_error').css('display','block');
            $('#phone_error').html(commonMsg + errorMsg);
            flag = false;
        }else if(!login_password){
            errorMsg = "密码不能为空";
            $('#password_error').css('display','block');
            $('#password_error').html(commonMsg + errorMsg);
            flag = false;
        }else if(login_password.length < 6){
            errorMsg = "密码不能少于6位";
            $('#password_error').css('display','block');
            $('#password_error').html(commonMsg + errorMsg);
            flag = false;
        }

        if (!flag) {
            return false;
        }

        $.ajax({
            type: "POST",
            url: "login",
            data: {
                "mobile":login_phone ,
                "password":login_password
            },
            success: function (da) {
                if(da == 1){
                    $('#password_error').css('display','block');
                    $('#password_error').html(commonMsg + "账号或密码错误");
                }else{
                    location.href = "dynamic-list";
                }
            },
            error:function(e){
                $('#password_error').css('display','block');
                $('#password_error').html(commonMsg + "账号或密码错误");
            }

        });
    }

    $("input").focus(function () {
        $('#phone_error').css('display','none');
        $('#password_error').css('display','none');

        $(this).parent(".loginRows").css('border', '1px solid #FFFFFF');
    });

    $('input').blur(function () {
        if (!$(this).val()) {
            $(this).parent(".loginRows").css('border', '1px solid #DBB76E');
            $(this).css('color', 'rgba(127,127,127, 0.5)');
        }
    });

    $("input").keyup(function () {
        $(this).css('opacity', '1');
        $(this).css('color', '#3A3A44');
    });

    $('input[type="password"]').attr('type', 'text').addClass('password-fix');
    setTimeout(function () {
        $('input.password-fix').attr('type', 'password').removeClass('password-fix');
    }, 400);

    //页面大小出现变化的时候再次获取新的font-size值
    $(window).resize(function () {

        setHtmlFontSize(1920);

        setMargin();

    });
    //初始化执行
    setHtmlFontSize(1920);

    setMargin();

    //动态设置html元素的font-size的方法
    function setHtmlFontSize(num) {
        //页面的宽度，其中17为页面默认的导航条的宽度
        var _w = document.documentElement.clientWidth - 17;

//        console.log(_w)
//        console.log(12 * (_w / 1200) + 'px')
        var fontSize = 16 * _w / num;
        if (fontSize<12)
            fontSize = 12;
        $('html').css('fontSize', fontSize);
//        console.log($('html').css('fontSize'))
    }

    function setMargin() {
        var screenWith = document.documentElement.clientWidth;
        var newHeight = screenWith / 1920 * 1080;
        var topMarginTop = newHeight / 1080 * 213.6;
        var topMarginBottom = newHeight / 1080 * 103.2;
        var bottomMarginTop = newHeight / 1080 * 279.6;

        $('#mianId').height(newHeight);
        $("#logoId").css('margin-top', topMarginTop + "px");
        $("#logoId").css('margin-bottom', topMarginBottom + "px");
        $("#bottomId").css('margin-top', bottomMarginTop + "px");
    }
</script>